<template>
  <div class="pie-index" id="pieLeft"></div>
</template>

<script>
export default {
  mounted() {
    this.drawPieLeft();
  },
  methods: {
    drawPieLeft() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("pieLeft"));

      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: function (p) {
            //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
          },
        },
        legend: {
          bottom: "0%",
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字大小为12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            // 饼状图的位置
            center: ["50%", "42%"],
            color: [
              "#065aab",
              "#066eab",
              "#0682ab",
              "#0696ab",
              "#06a0ab",
              "#06b4ab",
              "#06c8ab",
              "#06dcab",
              "#06f0ab",
            ],
            name: "年龄分布",
            type: "pie",
            // 第一个是内圆的大小 修改饼形图的大小
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            // 图像上的文字
            label: { show: false },
            labelLine: { show: true },
            data: [
              { value: 1, name: "0岁以下" },
              { value: 4, name: "20-29岁" },
              { value: 2, name: "30-39岁" },
              { value: 2, name: "40-49岁" },
              { value: 1, name: "50岁以上" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 让图标跟着屏幕去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style>
.pie-index {
  width: 100%;
  height: 100%;
}
</style>
